<template>
  <el-dialog
    :visible="dialogVisible"
    :before-close="toBack"
    :show-close="true"
    append-to-body
    class="small-common-dialog-size explate-dialog"
    @opened="initData"
  >
    <Title :title="titleName" style="margin-bottom:16px" font-size="16px"/>
    <el-input v-model="content" resize="none" type="textarea" placeholder="不超过500字符" class="edit" maxlength="500"/>
    <styleConfig v-if="dialogVisible" ref="styConfig" :new-config="styConfig" style="margin-top:10px"/>
    <div class="center">
      <el-button type="primary" size="small" class="submit-btn" @click="toSubmit">确定</el-button>
      <el-button type="info" size="small" class="back-btn cancel-btn-style" @click="toBack">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import styleConfig from './styleConfig';

export default {
  components: { Title, styleConfig },
  props: {
    titleName: {
      type: String,
      default: '请输入审批说明'
    }
  },
  data() {
    return {
      content: '',
      styConfig: '',
      dialogVisible: false,
      item: {},
      type: 0
    };
  },
  methods: {
    openDialog(item = {}, type = 0) {
      this.item = item;
      this.content = item.explanation || '';
      this.styConfig = item.styConfig || '';
      this.dialogVisible = true;
      this.type = type;
    },
    toBack() {
      this.content = '';
      this.styConfig = '';
      this.$refs['styConfig'].resetConfig();
      this.dialogVisible = false;
    },
    toSubmit() {
      const styConfig = this.$refs['styConfig'].getstyConfig();
      this.$emit('setExplanation', this.content, styConfig, this.type);
      this.content = '';
      this.styConfig = '';
      this.dialogVisible = false;
    },
    initData() { // 初始化样式组件
      this.styConfig && this.$refs['styConfig'].setConfig(JSON.parse(this.styConfig));
    }
  }
};
</script>
<style lang="scss" scoped>
    .explate-dialog{
      .edit{
          width:100%;
					&::v-deep {
					.el-textarea__inner{
							height: 246px !important;
						}
					}
        }
				&::v-deep {
          .el-dialog__body{
            padding-top: 20px !important;
          }
			}
    }
    .center{
        display: flex;
        align-items: center;
        justify-content: center;
				margin-top: 16px;
    }
</style>
